<template>
  <div class="home">
    <h1 ref="h1Ref">dom标签</h1>
    <h1>{{ store.count }}</h1>
    <h1>{{ store.computedCount }}</h1>
    <ul>
      <li v-for="item in store.list" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- ul就是项目列表，li就是列表项 -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
    <ChildrenVue :varMessage="varMessage"  parentMessage="这里是子组件静态值" @getMessage="getChildren"/>
    <el-button  type="primary" @click="logMessage">点击</el-button>
    <div style="margin: 2rem;">
      <el-button @click="store.increment">store测试</el-button>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive,ref, watch } from 'vue';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import ChildrenVue from '@/components/ChildrenVue.vue';
import { useCounterStore } from '@/store/counter'
// import { getAll,getByID } from '@/api/api';
const { BigInt } = window;
// export default defineComponent({
//   components: {
//     HelloWorld,
//   },
//   setup(){
//     console.log("hello")
//     const message='消息'
//     const logMessage=()=>{
//       console.log(message)

//     }
//     return{
//       message,
//       logMessage
//     }
//   },

// })
// 在这里定义组件的选项，不需要使用 export default
// const MyComponent = defineComponent({
//   components: {
//     HelloWorld,
//   }
// });
let varMessage=ref('响应式消息')
const varJson=reactive({
  count :0,
  name:"戴立龙",
  message:{
    address:'湖北省武汉市',
    age:18
  }
})
const getChildren=((parameter)=>{
  console.log('测试子传父',parameter)
})
const list=ref([1,2,3,4,5,6])
function logMessage() {
  varMessage.value+='变化'
  varJson.count+=1;
  varJson.message.age+=1;
  list.value.push(7,8,1)
  console.log(computeedState.value)
}
const store = useCounterStore()
const init = async() => {
  // let resAll = await getAll();
  // let resByID=await getByID(BigInt(1775420333340360700))
  // console.log(resAll.data.result);
  // console.log(resByID.data.result);
  // console.log(resByID.data.result);
  console.log(varJson)
  console.log(h1Ref.value)
  console.log(store.count)
}
// const logMessage = function() {
//   console.log(message);
// };
const computeedState = computed(function() {
  return list.value.filter(item => 
    item > 2
  )
})
watch(varMessage,(newValue,oldValue) => {
  console.log(`新值为${newValue},老值为${oldValue}`)
})
 // 监听 message 的变化，只关心新值
 watch(varMessage, (newValue) => {
      console.log('New value:', newValue);
    });
// 监听 多个对象
 watch([varMessage,varJson], ([newMes,newJson]) => {
      console.log('New value:', [newMes,newJson.name]);
      
    });
 // 
watch(varMessage,
  (newValue) => {
    console.log('New value:', newValue);
  },
  { immediate: true });

watch(varJson, (newValue) => {
  console.log('New value:', newValue.message.age);
});
onMounted(()=>{
  console.log('开始')
  init()
})
const h1Ref=ref(null)



</script>
